<template>
    <div class='cale-notVIP' v-show="merchInfoForOrder.sales.length&&!isVIP&&merchInfoForOrder.sales.indexOf(1)!==-1">
        <img src="https://cdn.yueyangshuyuan.com/%E4%BC%9A%E5%91%98%E6%9D%A1.png" alt="" class='cale-bg'>
        <div class='cale-container'>
            <div>
                <img src="https://cdn.yueyangshuyuan.com/vip.png" alt="" class="vip-icon">
                <span>超级会员购买可省{{merchPrice.discountedPrice||0}}元/人</span>
            </div>
            <div @tap='ToOpenVip'>
                <span class='cale-open-vip'>立刻开通</span>
                <img src="https://cdn.yueyangshuyuan.com/%E8%BF%9B%E5%85%A5.png" alt="" class="more">
            </div>
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex';
export default {
    computed: {
        ...mapState(['hasLogin', 'isVIP','merchInfoForOrder'])
    },
    data(){
        return{
            merchPrice:null
        }
    },
    mounted(){
        this.merchCalculate();
    },
    methods:{
        ToOpenVip(){
            uni.navigateTo({
                url: '/pages/vipPlay/vipPlay'
            });
        },
        merchCalculate(){
            this.$api.merchCalculate({
                count:1,
                sales:1,
                id:this.merchInfoForOrder.merchId
            }).then(json=>{
                if(json.code != -1){
                    this.merchPrice = json
                }else{
                    uni.showToast({
                        icon: 'none',
                        title: json.message
                    })
                }
            })
        }
    }
}
</script>
<style lang="scss" >
    .cale-notVIP{
        height: 84upx;
        padding:0 24upx;
        width: 100%;
        position: relative;
        margin-top: 26upx;
        margin-bottom: 26upx;
        .cale-bg{
            height: 84upx;
            width: 702upx;
            position: absolute;
            top: 0;
            left: 24upx;
            z-index: -1;
        }
        .vip-icon{
            width: 57upx;
            height: 24upx;
            margin-right: 10upx;
            position: relative;
            top: 3upx;
        }
        .more{
            width: 10upx;
            height: 17upx;
            margin-left: 8upx;
        }
        .cale-container{
            width: 646upx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 28upx;
            color: #FFFFFF;
            padding-left: 28rpx;
            padding-right: 28rpx;
            >div{
                line-height: 82rpx;
            }

            .cale-open-vip{
                font-size: 24upx;
            }
        }
    }
</style>